<template>
  <div id="app">

    <h1>1.指令练习 v-on 和 v-bind</h1>
    <div class="box">
        <h3>小黑自动收货机</h3>
        <button @click="buy(5,'coke')">购买一杯可乐消费5元</button>
        <button @click="buy(10,'coffee')">购买一杯咖啡消费10元</button>
    </div>
    <p>银行卡余额：{{balance}}元</p>
    <p>统计:购买咖啡一共 {{ coffeeCount }} 杯，购买可乐一共{{ cokeCount }} 杯 </p>
    <p>共消费:{{ consumeAmount }}</p>

    <hr/>

    <h1>2.图片引入</h1>
    <img v-bind:src="imageUrl2" alt=""/>

    <hr/>

    <h1>3.图片切换</h1>
    <button v-show="imgIndex > 0" @click="imgIndex--">上一页</button>
    <div>
      <img :src="imgs[imgIndex]" :alt="imgIndex">
    </div>
    <button v-show="imgIndex < imgs.length-1" @click="imgIndex++">下一页</button>
  
    <hr/>

    <h1>4.v-for指令练习</h1>
    <h3>小黑水果店</h3>
    <ul>
      <li v-for="(item,index) in fruitList" :key="index">
        <span>名称:{{ item.name }}</span>
        <span > ,</span>
        <span>价格: {{ item.price }}</span>
      </li>
    </ul>

    <h3>5.小黑的书架</h3>
    <ul>
      <li v-for="(item,index) in books" :key="index">
        <span> {{ item.name }} </span>
        <span> {{ item.author }} </span>
        <button @click="delBook(item.id)"> 删除 </button>
      </li>
    </ul>

    <hr/>
    <h3>6.双向绑定练习</h3>

    <div>
      <table>
        <tr>
          <td>账号</td>
          <td>
            <input type="text" v-model="loginForm.username"/><span>{{ loginForm.username }}</span>
          </td>
        </tr>
        <tr>
          <td>密码</td>
          <td>
            <input type="password"  v-model="loginForm.password"/><span>{{ loginForm.password }}</span>
          </td>
        </tr>
        <tr>
          <td><button @click="login">登录</button></td>
          <td><button @click="reset">重置</button></td>
        </tr>
      </table>
    </div>

    <hr/>

    <h3>7.小黑记事本</h3>
    <div>
      <input type="text" placeholder="请输入任务" v-model="taskForm.taskName" @keyup.enter="addTask"/>
      <button @click="addTask">添加任务</button>
      <ul>
        <li v-for="(item,index) in tasks" :key="item.id">
          <span>{{ index +1 }}.</span>
          <span>{{ item.taskName }}</span>
          <button @click="delTask(item.id)">x</button>
        </li>
      </ul>
      <div>
        <span>合计:</span>
        <span>{{ tasks.length }}</span>
        <button @click="cleanTask">清空任务</button>
      </div>
    </div>

    <hr/>
    
    <h3>8.事件修饰符&按键修饰符</h3>
    <p>@click.stop=""</p>
    <p>@click.prevent=""</p>
    <p>@click.capture=""</p>
    <p>@click.self=""</p>
    <p>@click.once=""</p>
    <p>@click.passive=""</p>

    <p>@keyup=""</p>
    <p>@keyup.enter=""</p>
    <p>@keyup.prevent</p>

    <p>v-model.nummber</p>
    <p>v-model.trim</p>

    <hr/>
    <UserComponent/>
  </div>    
</template>

<script>

import UserComponent from './views/user/UserComponent.vue'

export default {
  name: 'App',
  components:{
    UserComponent
  },
  data(){
    return{
      balance:"100",
      cokeCount:0,
      coffeeCount:0,
      consumeAmount:0,
      imageUrl1: require('@/assets/logo.png'),
      imageUrl2: '/images/logo.png',
      imgIndex:0,
      imgs:[
        '/images/11-00.gif',
        '/images/11-01.gif',
        '/images/11-02.gif',
        '/images/11-03.gif',
        '/images/11-04.png',
        '/images/11-05.png'
      ],
      fruitList:[
        {
          "name":"苹果",
          "price":"6元/斤"
        },
        {
          "name":"橙子",
          "price":"12元/斤"
        },
        {
          "name":"西梅",
          "price":"32元/斤"
        }
      ],
      books:[
        {"id":1,"name":"《九阴真经》","author":"梅超风"},
        {"id":2,"name":"《乾坤大挪移》","author":"张无忌"},
        {"id":3,"name":"《易筋经》","author":"达摩祖师"},
        {"id":4,"name":"《太极拳》","author":"张三丰"}
      ],
      loginForm:{
        username:'',
        password:''
      },
      tasks:[
        {
          id:1,
          taskName:"早晨 6 点起床"
        },
        {
          id:2,
          taskName:"洗漱 10 分钟搞定"
        },
        {
          id:3,
          taskName:"6:30 准时出门坐地铁"
        } ,
        {
          id:4,
          taskName:"7:20 到公司吃早餐"
        }
      ],
      taskForm:{
        taskName:''
      }
    }
  },
  methods:{
    buy(price,type){
      if(this.balance < price){
        alert("余额不足，请充值")
        return
      }
      this.balance -= price
      if('coke' === type){
        this.cokeCount += 1;
      }
      if('coffee' === type){
        this.coffeeCount += 1;
      }
      this.consumeAmount += price;
    },
    delBook(id){
      console.log(id)
      if(undefined == id){
        return
      }
      this.books = this.books.filter(item =>item.id !=id);
    },
    login(){
      console.log(JSON.stringify(this.loginForm))
    },
    reset(){
      this.loginForm.username=''
      this.loginForm.password=''
    },
    cleanTask(){
      this.tasks = []
    },
    delTask(taskId){
      this.tasks = this.tasks.filter(item => item.id != taskId)
    },
    addTask(){
      const inputTaskName = this.taskForm.taskName
      const taskObj = {}
      taskObj.id = new Date().getTime();
      taskObj.taskName = inputTaskName
      this.tasks.unshift(taskObj)
      this.taskForm.taskName=''
    }

  }
}
</script>

<style>
div{
  display: block;;
}
.box{
  width: 300px;
  height: 200px;
  border-style:solid;
  border-width:1px;
  border-color: black;
  background-color: aquamarine;
  text-align: center;

}

</style>
